<template>
	<Nav class="f">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
			</view>
			<view>搜索</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="s">
			<Search @search="searchKey => $goUrl(`/subPackage/index/searchResult?key=${searchKey}`)" />
		</view>
		<view class="content p-32">
			<view class="history-box">
				<view class="history dispaly-just-between">
					<view class="title-box">历史记录</view>
					<view class="del" @click="delHistory">
						<image src="/static/icon/del.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="list dispaly-center">
					<view class="item dispaly-align-center " v-for="(item, index) in historyList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="history-box">
				<view class="history dispaly-just-between">
					<view class="title-box">大家都在搜</view>
				</view>
				<view class="list dispaly-center">
					<view class="item dispaly-align-center " v-for="(item, index) in historyList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import Search from '@/compoment/search/search.vue'
	import {
		getElementHeight
	} from '@/utils/util'

	// 获取元素高度
	const navHeiht = ref(0)
	onMounted(async () => {
		const res = await getElementHeight('.f')
		navHeiht.value = res
	})

	// 删除历史
	const delHistory = () => {
		uni.showModal({
			title: '提示',
			content: '是否删除历史记录',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	// 历史记录
	const historyList = ref([{
			name: '高端西服定制',
			id: 1
		},
		{
			name: '礼服定制',
			id: 1
		},
		{
			name: '礼服定制',
			id: 1
		},
		{
			name: '高端西服定制',
			id: 1
		},
	])
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {
		background-color: #fff;

		.history-box:last-child {
			margin-top: 40rpx;
		}

		.history-box {
			.history {
				.title-box {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 900;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.del {
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.list {
			flex-wrap: wrap;
			margin-top: 16rpx;

			.item {
				margin: 8rpx;
				padding: 16rpx 32rpx;
				background: #F3F5F7;
				border-radius: 40rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

	}
</style>

<style>
	page {
		background-color: #fff;
	}
</style>